<template>
	<view class="">
		<view class="" style="width: 100%;height: 160rpx;">
			<u-navbar title="停车" :bgColor="navBgColor" :titleStyle="{ color: navColor }" fixed>
				<view slot="left"></view>
			</u-navbar>
		</view>
		<view class="cars-info" :class="{ carsinfos: current_aTab == 1}">
			<view class="conscon1">
				<!-- <u-sticky> -->
				<u-tabs :list="list4" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="current_aTab"
					@click=" tab_Click" lineWidth="30"></u-tabs>
				<!-- </u-sticky> -->
			</view>
			<scroll-view scroll-y="true" style="height: 80vh;" v-if="current_aTab == 0">
				<view class="list">
					<view class="onlist">
						<view class="cars_top">
							<view class="cars_t_l">
								<view class="cars_t_l_t">
									车牌号
								</view>
								<view class="cars_t_l_b" v-if="plate_no !=''" @click="plate_list">
									{{plate_no}}<text style="margin-left: 10rpx;">></text>
								</view>
								<view class="cars_t_l_b" v-else @click="plate_list">
									请添加车牌<text style="margin-left: 10rpx;">></text>
								</view>
								<view class="cars_t_l_b" v-else>
									<text style="margin-left: 10rpx;">></text>
								</view>
							</view>
							<view class="cars_t_r" @click="add">
								<image style="width: 20rpx;height: 20rpx;" :src="jiahao1" mode=""></image>
								<text style="margin-left: 6rpx;">添加车牌号</text>
							</view>
						</view>
						<view class="cars_xian">

						</view>
						<view class="onlist_on">
							<view class="onlist_left">
								<view class="onlist_l_l">
									停车费用
								</view>
								<view class="onlist_l_r" v-if="infoarr.order_money">
									¥{{infoarr.order_money}}
								</view>
								<view class="onlist_l_r" v-else>
									¥0.00
								</view>
							</view>
							<view class="onlist_right">
								<view class="onlist_r_l">
									<text>停车时长</text>
								</view>
								<view class="onlist_r_r">
									<text v-if="infoarr.time_lon">{{infoarr.time_long}}</text>
									<text v-else>{{infoarr.time_long}}</text>
								</view>
							</view>
						</view>
						<view class="cars_xian">

						</view>
						<view class="onlist_on">
							<view class="onlist_left">
								<view class="onlist_l_l">
									入场时间
								</view>
								<view class="onlist_l_r" v-if="infoarr.in_time">
									{{infoarr.in_time}}
								</view>
								<view class="onlist_l_r" v-else>
									无入场时间
								</view>
							</view>

						</view>
					</view>
					<view class="on_list">
						<view class="on_list_left">
							<view class="on_list_l_l">
								停车地点
							</view>
							<view class="on_list_l_r" v-if="infoarr.park_name">
								{{infoarr.park_name}}
							</view>
							<view class="on_list_l_r" v-else>
								暂无
							</view>
						</view>
					</view>
					<view class="on_list">
						<view class="on_list_left" style="padding-bottom: 10rpx;">
							<view class="on_list_l_l">
								总费用
							</view>
							<view class="on_list_l_r" v-if="infoarr.total_money">
								¥{{infoarr.total_money}}
							</view>
							<view class="on_list_l_r" v-else>
								¥0.00
							</view>
						</view>
						<view class="on_list_left" style="padding-bottom: 10rpx;">
							<view class="on_list_l_l">
								累计折扣
							</view>
							<view class="on_list_l_r">
								¥0.00
							</view>
						</view>
						<view class="on_list_left" style="padding-bottom: 10rpx;">
							<view class="on_list_l_l">
								应付费用
							</view>
							<view class="on_list_l_r" v-if="infoarr.order_money">
								¥{{infoarr.order_money}}
							</view>
							<view class="on_list_l_r" v-else>
								¥0.00
							</view>
						</view>
					</view>
					<view class="cars_text">
						<view class="cars_t_w">
							苏文投集团停车收费办法:
						</view>
						<view class="cars_t_s">
							一、2小时内(含2小时)免费;
						</view>
						<view class="cars_t_s">
							二、2小时外，地下车位每小时5元，地面车位每小时6元，不足1小时按1小时计;
						</view>
						<view class="cars_t_s">
							三、每日最高封顶80元
						</view>
						<view class="cars_t_w">
							说明:
						</view>
						<view class="cars_t_s">
							一、当日24小时后重新计算累计收费:
						</view>
						<view class="cars_t_s">
							二、军车、执行公务的司法行政执法车、消防车救护车、邮资车、工程抢修车停放，免收停车费;
						</view>
						<view class="cars_t_s">
							三、车内贵重物品自行保管，本车场只提供车辆停放场地，不负责车辆看管:
						</view>
						<view class="cars_t_s">
							四、缴费后请在15分钟内驶离停车场。
						</view>
					</view>
					<view class="bottom-addbtn">
						<u-button text="立即缴费" shape="circle" @click="onmoney"
							color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
					</view>
				</view>
				<u-picker :show="show" :columns="columns" keyName="plate_no" @confirm="confirm" @cancel="show = false"
					closeOnClickOverlay></u-picker>
				<!-- <view class="bottom-add-btn" v-if="current_aTab == 0">
					<u-button text="立即缴费" shape="circle" @click="onmoney"
						color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
				</view>
				<view class="bottom-add-btn" v-if="current_aTab == 1">
					<u-button text="智慧寻车" shape="circle"
						color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
				</view> -->
			</scroll-view>

			<scroll-view scroll-y="true" style="height: 60vh;" v-if="current_aTab == 1">
				<view class="cons_con">
					<view class="" style="width: 100%;height: 20rpx;background-color: #F4F9F9;">

					</view>
					<view class="conscon1">
						<u-sticky>
							<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
								:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
								itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="currentTab"
								@click=" tabClick"></u-tabs>
						</u-sticky>
					</view>

					<view class="add_list">
						<image class="add_li_img" :src="po48" mode="" v-if="list3 !=''"></image>
						<view class="group_9" v-else>
							<u-empty text="此楼层无智慧车场"
								icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
						</view>
						<view class="add_li_right" v-for="(item,index) in list3" :key="index"
							:class="{ resize: index === gjindex }" @click="loucheng(item,index)">
							{{item.name}}F
						</view>
					</view>
					<view class="box_1">
						<view class="box_4">
							<view class="image-text_1">
								<view class="section_1"></view>
								<text lines="1" class="text-group_1">智慧车场剩余数量</text>
							</view>
						</view>
						<view class="list_1">
							<view class="list-items_1-0">
								<!-- <text lines="1" class="text_4-1">{{item.name}}</text> -->
								<view class="list-items_1-1">
									<view class="list-items_1-6">
										<!-- <image style="width: 32rpx;height: 32rpx;" :src="po68" mode=""></image> -->
										<text lines="1" class="text_3-0"
											style="font-size: 40rpx;color: #1677FE;font-size: 600;">{{communallist.total}}</text>
										<text lines="1" class="text_3-0" style="margin-top: 10rpx;">车位总数</text>
									</view>
									<text lines="1" class="text_3-1"></text>
									<view class="list-items_1-6">
										<!-- <image style="width: 32rpx;height: 32rpx;" :src="po67" mode=""></image> -->
										<text lines="1" class="text_4-0"
											style="font-size: 40rpx;color: #F2943D;font-size: 600;">{{communallist.used}}</text>
										<text lines="1" class="text_4-0" style="margin-top: 10rpx;">占用车位</text>
									</view>
									<text lines="1" class="text_3-2"></text>
									<view class="list-items_1-6">
										<!-- <image style="width: 32rpx;height: 32rpx;" :src="po64" mode=""></image> -->
										<text lines="1" class="text_4-0"
											style="font-size: 40rpx;color: #2EB38A;font-size: 600;">{{communallist.free}}</text>
										<text lines="1" class="text_4-0" style="margin-top: 10rpx;">剩余车位</text>
									</view>
								</view>
							</view>
						</view>
						<!-- <text lines="1" class="text_5">更多记录</text> -->
					</view>
					<view class="bottom-add-btn">
						<u-button text="智慧寻车" shape="circle"
							color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
					</view>
				</view>
				<!-- <view class="bottom-add-btn" v-if="current_aTab == 0">
					<u-button text="立即缴费" shape="circle" @click="onmoney"
						color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
				</view>
				<view class="bottom-add-btn" v-if="current_aTab == 1">
					<u-button text="智慧寻车" shape="circle"
						color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
				</view> -->
			</scroll-view>
		</view>
		<tabber :active="3"></tabber>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#000000',
				show: false,
				columns: [],
				plate_no: '',
				nums: '',
				timer: null,
				infoarr: {
					order_money: '',
					total_money: "",
					park_name: '',
					in_time: '',
					time_long: ''
				},
				venue_id: '',
				list4: [{
					name: '停车缴费'
				}, {
					name: '智慧车场'
				}],
				current_aTab: 0,
				po66: this.$https.assetsPath + 'po66.png',
				po50: this.$https.assetsPath + 'po50.png',
				po68: this.$https.assetsPath + 'po68.png',
				po67: this.$https.assetsPath + 'po67.png',
				po64: this.$https.assetsPath + 'po64.png',
				jiahao1: this.$https.assetsPath + 'jiahao1.png',
				po48: '',
				currentTab: 0,
				gjindex: 0,
				list1: [],
				list2: [],
				currentTab: 0,
				current_Tab: 0,
				gjindex: 0,
				list3: [],
				cate_id: '',
				floorindex: '',
				venue_id: '',
				splist: [],
				communallist: {
					free: '',
					total: '',
					used: '',
				}
			}
		},
		onLoad(option) {
			this.venue_id = option.venues_id
			this.plate_no = ''
			if (option.item) {
				const item = JSON.parse(decodeURIComponent(option.item));
				this.plate_no = item.plate_no
				this.plateinfo()
			} else {
				this.platelist()
			}
			// this.getOverTime();
		},
		onShow() {
			this.plate_no = ''
			this.columns = []
			this.infoarr = ''
			let that = this;
			// that.timer = null;
			// clearTimeout(that.timer);
			// that.timer = setTimeout(() => {
			// 	this.getOverTime();
			// }, 60000);
			this.platelist()
		},
		// 一般页面用onUnload
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		// tabbar页面用onHide
		onHide() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			tab_Click(item) {
				this.current_aTab = item.index;
				if (item.index == 0) {
					this.platelist()
				} else {
					this.getSeCondVenue()
					this.communal()
				}
			},
			async platelist() {
				let that = this
				let data = {
					open_id: uni.getStorageSync('openid'),
				}
				let result = await index.platelist(data)
				if (result.code == 1) {
					that.columns.push(
						result.data.result
					)
					if (result.data.result != '') {
						that.plate_no = result.data.result[0].plate_no;
						this.plateinfo()
					}
				}
			},
			// 查询停车费
			async plateinfo() {
				let that = this
				let data = {
					open_id: uni.getStorageSync('openid'),
					plate_no: this.plate_no
				}
				let result = await index.plateinfo(data)
				if (result.code == 1) {
					this.infoarr = result.data.result
				}
			},
			async plate_list() {
				let that = this
				that.columns = []
				let data = {
					open_id: uni.getStorageSync('openid'),
				}
				let result = await index.platelist(data)
				if (result.code == 1) {
					this.show = true
					that.columns.push(
						result.data.result
					)
				}
			},
			getOverTime() {
				let time = '0:59:59'
				var len = time.split(':')
				if (len.length == 3) {
					var hour = time.split(':')[0];
					var min = time.split(':')[1];
					var sec = time.split(':')[2];
				}

				if (len.length == 2) {
					var min = time.split(':')[0];
					var sec = time.split(':')[1];
				}
				if (len.length == 1) {
					var sec = time.split(':')[0];
				}

				let hours = hour; //初始化
				let minutes = min; //初始化
				let seconds = sec; //初始化
				let millisecond = 0; //毫秒

				if (hours < 10) {
					hours = "0" + hours;
				}
				if (minutes < 10) {
					minutes = "0" + minutes;
				}

				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				this.timer = setInterval(() => {
					millisecond = millisecond + 50;
					if (millisecond >= 1000) {
						millisecond = 0;
						var a = 1;
						seconds = Number(seconds) + Number(a)
					}
					if (seconds >= 60) {
						seconds = 0;
						var b = 1;
						minutes = Number(minutes) + Number(b)
					}

					if (minutes >= 60) {
						minutes = 0;
						var c = 1;
						hours = Number(hours) + Number(c)
					}
					this.nums = hours + ':' + minutes + ':' + seconds;
				}, 50);
			},
			gocar() {},
			add() {
				uni.navigateTo({
					url: './cars-info'
				});
			},
			confirm(e) {
				this.show = false
				this.plate_no = e.value[0].plate_no
				this.columns = []
			},
			// 查询停车费-创建订单
			async onmoney() {
				if (this.infoarr.order_money > 0) {
					let that = this
					that.columns = []
					let data = {
						open_id: uni.getStorageSync('openid'),
						plate_no: this.plate_no,
						pay_amount: this.infoarr.pay_amount,
						venue_id: this.venue_id,
						project_id: getApp().globalData.projectId,
					}
					let result = await index.platecreate(data)
					if (result.code == 1) {
						uni.navigateTo({
							url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
								that.infoarr.order_money + "&venue_id=" +
								that.venue_id + "&order_id=" + result.data.result.order_id + "&orderid=" +
								result.data.result.id + "&order_type=" + result.data.result.order_type +
								"&chaoshitype=" + 2 + "&plate_no=" + that.plate_no,
						});
					}
				} else {
					uni.showToast({
						title: "无需缴费",
						icon: "none",
					});
				}
			},

			// 获取分类商品
			async getSeCondVenue() {
				let data = {}
				let result = await subscribe.getSeCondVenue(data)
				if (result.code == 1) {
					this.list1 = result.data
					this.list3 = result.data[0].floor
					this.po48 = result.data[0].floor[0].court_img
					this.venue_id = result.data[0].id
					this.floorindex = result.data[0].floor[0].name
				}
			},
			// 获取店铺商品
			async communal() {
				let data = {
					project_id: '',
					venue_id: '',
					type: '',
					output: 'json'
				}
				let result = await subscribe.parkcommunal(data)
				if (result.code == 1) {
					this.communallist = result.data
				}
			},
			loucheng(item, index) {
				// this.current_Tab = 0
				this.gjindex = index
				this.po48 = item.court_img
				this.floorindex = item.name
				// this.communal()
			},
			tabClick(item) {
				this.po48 = ''
				this.list2 = []
				this.splist = []
				this.gjindex = 0
				this.current_Tab = 0
				this.currentTab = item.index;
				this.list3 = item.floor
				this.po48 = item.floor[0].court_img
				this.venue_id = item.id
				this.floorindex = item.floor[0].name
				this.communal()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cars-info {
		width: 100%;
		min-height: 100%;
		background-color: #EDF5F5;
		margin-bottom: 100rpx;
	}

	.carsinfos {
		min-height: 100vh;
		width: 100%;
		background-color: #ffffff;
	}

	.conscon1 {
		// padding: 0 0 20rpx 0;

		/deep/.u-tabs {
			background-color: #fff;
			// margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
				z-index: 99;
			}
		}
	}

	.list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.onlist {
			width: 96%;
			height: auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 0 30rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 20rpx;

			.cars_top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.cars_t_l {
					display: flex;
					flex-direction: column;
					font-size: 26rpx;

					.cars_t_l_t {
						color: #aaaaaa;
					}

					.cars_t_l_b {
						color: #000;
						font-weight: 600;
						margin-top: 10rpx;
					}
				}

				.cars_t_r {
					width: 190rpx;
					height: 75rpx;
					background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%);
					font-size: 26rpx;
					color: #fff;
					border-radius: 75rpx 0 0 75rpx;
					// text-align: center;
					// line-height: 75rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
			}

			.onlist_on {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 30rpx;

				.onlist_left {
					display: flex;
					flex-direction: column;
					// align-items: center;
					font-size: 26rpx;

					.onlist_l_l {
						color: #aaaaaa;
					}

					.onlist_l_r {
						color: #000;
						margin-top: 10rpx;
						font-weight: 600;
					}
				}

				.onlist_right {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 26rpx;

					.onlist_r_l {
						color: #aaaaaa;
						padding-right: 30rpx;
					}

					.onlist_r_r {
						color: #000;
						// font-weight: 600;
						padding-right: 30rpx;
						margin-top: 10rpx;
					}
				}
			}

			.cars_xian {
				width: 96%;
				// height: 1rpx;
				border-style: dashed;
				/* 设置为虚线 */
				border-width: 1rpx;
				border-color: #AAAAAA;
				/* 边框颜色 */
				margin-top: 20rpx;
			}
		}

		.on_list {
			width: 96%;
			height: auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 20rpx;

			.on_list_left {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;

				.on_list_l_l {
					color: #aaaaaa;
				}

				.on_list_l_r {
					color: #000;
				}
			}
		}

		.cars_text {
			padding: 20rpx 0 0 20rpx;
			font-size: 26rpx;

			.cars_t_w {
				color: #000;
				font-weight: 600;
				margin-top: 15rpx;
			}

			.cars_t_s {
				color: #aaaaaa;
				margin-top: 15rpx;
			}
		}
	}

	.cons_con {
		.add_list {
			position: relative;
			width: 710rpx;
			height: 420rpx;
			margin: 0 auto;

			.add_li_img {
				width: 710rpx;
				height: 420rpx;
				margin: 0 auto;
				background-color: #F4F9F9;
				padding: 20rpx;
			}

			.add_li_right {
				position: absolute;
				z-index: 9;
				right: 20rpx;
				width: 62rpx;
				height: 62rpx;
				border: 1rpx #b1b1b1 solid;
				top: 180rpx;
				background-color: #fff;
				line-height: 62rpx;
				text-align: center;
				margin-top: 62rpx;
				font-size: 26rpx;
			}

			.resize {
				color: #4BA677;
			}

			/* 根据索引值设置不同的垂直偏移 */
			.add_li_right:nth-child(1) {
				top: 30rpx;
			}

			.add_li_right:nth-child(2) {
				top: 60rpx;
				/* 根据需求调整偏移量 */
			}

			.add_li_right:nth-child(3) {
				top: 120rpx;
				/* 根据需求调整偏移量 */
			}
		}

		.conscon1 {
			padding: 0 0 20rpx 0;

			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}

		.box_1 {
			// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
			background-color: rgba(255, 255, 255, 1.0);
			display: flex;
			flex-direction: column;
			padding: 29rpx 12rpx 18rpx 20rpx;
		}

		.box_4 {
			background-color: rgba(255, 255, 255, 1.0);
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			padding: 0 0 20rpx 0;
		}

		.image-text_1 {
			width: 177rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
		}

		.section_1 {
			background-color: rgba(75, 166, 119, 1.0);
			border-radius: 12rpx;
			width: 6rpx;
			height: 26rpx;
			display: flex;
			flex-direction: column;
			margin: 8rpx 0 8rpx 0;
		}

		.text-group_1 {
			overflow-wrap: break-word;
			color: #333333;
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
		}

		.list_1 {
			// height: 960rpx;
			margin-right: 8rpx;
			display: flex;
			flex-direction: column;
		}

		.list-items_1-0 {
			width: 710rpx;
			background-size: 100% 100%;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx 0 30rpx;
			background: #F4F9F9;
			border-radius: 20rpx;
			align-items: center;
			height: 180rpx;
		}

		.list-items_1-1 {
			width: 100%;
			background-size: 100% 100%;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			background: #F4F9F9;
			border-radius: 20rpx;
			align-items: center;
			padding: 0 50rpx;
		}

		.list-items_1-6 {
			flex-direction: column;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text_3-0 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
		}

		.text_3-1 {
			background-color: #7C9789;
			border-radius: 12rpx;
			width: 1rpx;
			height: 25rpx;
			display: flex;
			flex-direction: row;
		}

		.text_3-2 {
			background-color: #7C9789;
			border-radius: 12rpx;
			width: 1rpx;
			height: 25rpx;
			display: flex;
			flex-direction: row;
		}

		.text_4-0 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			margin: 0 0 0 20rpx;
		}

		.text_4-1 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			margin: 0 0 0 20rpx;
		}

		.text_5 {
			overflow-wrap: break-word;
			color: rgba(114, 158, 135, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 26rpx;
		}
	}

	.bottom-add-btn {
		position: fixed;
		width: 100%;
		height: 10vh;
		left: 0;
		bottom: 180rpx;
		padding: 20rpx 30rpx;
		// background-color: white;
		// margin-bottom: 130rpx;
	}

	.bottom-addbtn {
		// position: fixed;
		width: 100%;
		height: 10vh;
		// left: 0;
		// bottom: 180rpx;
		padding: 20rpx 30rpx;
		// background-color: white;
		margin-bottom: 100rpx;
		margin-top: 20rpx;
	}
</style>